<template>
  <div ref="parkingtime_echart" id="parkingtime_echart"></div>
</template>
<script>
export default {
  data() {
    return {
      trafficData: {},
    };
  },
  methods: {
    initChart() {
      fetch(`./testData/parkingtimecdata.json`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          let { timeData, totalValue } = data;

          // 配置项
          const option = {
            tooltip: {
              trigger: "item",
            },
            legend: {
              top: "15%",
              right: "right",
              textStyle: {
                color: "#fff",
                fontSize: 8,
              },
              formatter: function (name) {
                // 在图例后面添加所占的百分比
                // debugger
                const value = timeData.find((item) => item.name === name).value;
                const percent = ((value / totalValue) * 100).toFixed(2);
                return `${name} (${percent}%)`;
              },
            },
            series: [
              {
                name: "停车时长分布",
                type: "pie",
                radius: ["40%", "70%"],
                center: ["25%", "50%"], // 将图表中心点设置在左侧
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: "center",
                  fontSize: 10,
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 10,
                    fontWeight: "bold",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: timeData,
              },
            ],
          };

          let myChart = echarts.init(this.$refs.parkingtime_echart);
          myChart.setOption(option, true);

          window.addEventListener("resize", () => {
            myChart.resize();
          });
        });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
#parkingtime_echart {
  height: 100%;
  width: 100%;
}
.chart-container {
  height: calc(50% - 25px);
  width: calc(50% - 25px);
  position: relative;
}

.legend-container {
  padding-top: 3px;
  display: flex;
  justify-content: space-around;
  color: #fff;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.legend-label {
  font-size: 12px;
}
</style>
